<template>
	<view class="oa-notice-detail">
		<img class="statusImg" :src="statusImg" alt="" />
		<view class="input-detail">
			<original-form :forms="formData" :type="processInfo.processType" v-if="render"></original-form>
		</view>
		<view class="" v-if="!isProcessType">
			<form>
				<view class="cu-bar bg-white">
					<view class="action border-title">
						<text class="cuIcon-titles text-green"></text>
						<text class="text-xl text-bold">{{formTitle}}</text>
					</view>
				</view>
				<view class="cu-form-group" v-for="(item, index) in formItems" :key="index">
					<view class="cu-list" style="margin: 10upx 0;width: 100%;" v-if="item.name == 'TableList'">
						<view class="cu-item-list" v-for="(value, index1) in formData[item.id]">
							<view class="item" v-for="(value1, index1) in item.props.columns">
								<text class="title">{{value1.title}}</text>
								<text v-if="value1.name == 'UserPicker'">{{userName(value[value1.id])}}</text>
								<text v-else>{{value[value1.id]}}</text>
							</view>
						</view>
					</view>
					<view class="title" v-if="item.name !== 'TableList'">{{item.title}}</view>
					<view v-if="item.name !== 'TableList'">
						<text class="label">
							{{ typeof formData[item.id] == 'object'? String(formData[item.id]) : formData[item.id] }}
						</text>
					</view>
				</view>
			</form>
		</view>

		<view class="uni-timeline">
			<view class="uni-timeline-item" :class="[
						index === 0 ? `uni-timeline-first-item text-${themeColor.name}` : `text-${themeColor.name}`,
						index === approveDetail.length - 1 ? 'uni-timeline-last-item' : ''
					]" v-for="(item, index) in approveDetail" :key="index">
				<view class="uni-timeline-item-divider"
					:style="{backgroundColor:!item.status?'#b1b1b1':`${themeColor.color}`}"></view>
				<view class="uni-timeline-item-content">
					<view>
						{{ item.taskName }}
					</view>
					<view class="datetime" v-if="item.endTime">
						审批时间：{{ item.endTime | time }}
					</view>
					<view class="text">
						审批人：{{item.assignee}}
					</view>
					<view class="text">
						审批结果：{{item.status == '1'?'同意':item.status == '2'?'拒绝':''}}
					</view>
					<view class="text">
						备注：{{item.comment}}
					</view>
				</view>
			</view>
		</view>


		<view class="feedback-title" v-if="processInfo.tabType == 0">
			<text>问题和意见</text>
			<text class="feedback-quick" @tap="chooseMsg">快速键入 <text class="iconfont iconxia"></text></text>
		</view>
		<view class="feedback-body" v-if="processInfo.tabType == 0">
			<textarea placeholder="请详细描述您的意见..." v-model="sendDate.suggest" class="feedback-textare" />
		</view>
		<view class="footer" v-if="processInfo.tabType == 0">
			<view v-for="(item, index) in radioList" :key="index">
				<button class="action-btn" :style="{backgroundColor:item.color}" @tap="handleWorksOperation(item.id)">
					{{item.title}}
				</button>
			</view>
		</view>
		<view class="footer" v-if="processInfo.tabType == 1 && processInfo.businessStatus == 1">
			<button class="action-btn" :class="'bg-' + themeColor.name" @tap="revokeItem()">
				撤回
			</button>
		</view>

		<!--加载动画-->
		<oa-loading isFullScreen :active="loading"></oa-loading>
	</view>
</template>

<script>
	/**
	 *@des 
	 *@author yiiframe 21931118@qq.com
	 *@blog http://www.yiiframe.com
	 *@date 2019/1/1 07:25:00
	 */
	import {
		processHistory,
		getProcessInstanceInfo,
		agree,
		refuse,
		revoke
	} from '@/api/approve'
	import OriginalForm from "@/components/originalForm/originalForm.vue";
	import moment from '@/common/moment';
	import {
		timeout
	} from 'q';

	export default {
		components: {
			OriginalForm
		},
		data() {
			return {
				processInfo: {}, // 接收传参
				formData: {},
				formItems: [],
				formTitle: "",
				render: false,
				reset: 0,
				audit_id: '',
				type: '',
				msgContents: [
					'同意',
					'不同意',
					'其他原因'
				],
				sendDate: {
					type: '1',
					suggest: '',
					contact_way: ''
				},
				approveDetail: [],
				radioList: [{
					"id": "audit",
					"title": "同意",
					"color": "#47d700"
				}, {
					"id": "refused",
					"title": "拒绝",
					"color": "#de042c"
				}],
				loading: false,
				processType: this.$mConstDataConfig.processType,
				isProcessType: false,
				statusImg: null,
			};
		},
		computed: {

		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val).format('YYYY-MM-DD HH:mm');
			}
		},
		onShow() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeColor.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.detail()
			this.getProcessInfo()
		},
		onLoad(option) {
			this.processInfo = option
			// 是否系统流程
			this.isProcessType = this.processType.indexOf(this.processInfo.processType) > -1
			let img = this.worksStatusImg(this.processInfo.businessStatus)
			this.statusImg = require(`@/static/${img}.png`)
			console.log(this.processInfo, this.processInfo.processType, this.isProcessType, this.statusImg,
				'this.isProcessType')
		},

		onShareAppMessage() {
			return {
				title: this.banner.title,
				path: `/pages/index/notice/detail?id=${this.id}`
			};
		},
		onBackPress() {
			uni.$emit('isRefresh', this.processInfo.tabType)
			// this.$mHelper.prePage(1,{tabType:this.processInfo.tabType})
		},
		methods: {
			// 是否系统流程
			// isProcessType(value){
			// 	return this.processType.indexOf(value)>-1
			// },
			// 状态显示格式化
			worksStatusImg(worksStatus) {
				let statusImg;
				this.$mConstDataConfig.worksStatus.forEach(worksItem => {
					if (worksItem.key === worksStatus) {
						statusImg = worksItem.img;
					}
				});
				return statusImg;
			},
			// 获取操作历史
			detail() {
				processHistory(this.processInfo.processInstanceId).then(res => {
					this.approveDetail = res.item
					// this.dialog = true
				})
			},
			getProcessInfo() {
				this.loading = true;
				var params = {}
				if (this.processInfo.taskId) {
					params = {
						processInstanceId: this.processInfo.processInstanceId,
						taskId: this.processInfo.taskId
					}
				} else {
					params = {
						processInstanceId: this.processInfo.processInstanceId
					}
				}

				getProcessInstanceInfo(params).then((res) => {
					this.formData = {
						...res.item.formData
					};
					this.formTitle = res.item.processTemplates.formName
					this.formItems = this.$mHelper.flatFormItem(JSON.parse(res.item.processTemplates.formItems));
					this.render = true
					this.loading = false;
				})
			},
			userName(list) {
				// 处理选择的人员
				var name = []
				list.forEach(res => {
					name.push(res.name)
				})
				return name.toString()
			},
			// 快速输入
			chooseMsg() {
				uni.showActionSheet({
					itemList: this.msgContents,
					success: res => {
						this.sendDate.suggest = this.msgContents[res.tapIndex];
					}
				});
			},

			async handleWorksOperation(status) { //审核
				const params = {
					...this.processInfo,
					currentUserInfo: uni.getStorageSync('user'),
					comments: this.sendDate.suggest,
				};
				var that = this
				if (status == 'audit') {
					//同意
					uni.showModal({
						title: '温馨提示',
						content: '是否确认同意该审批？',
						success: function(result) {
							if (result.confirm) {
								that.loading = true;
								agree(params)
									.then((res) => {
										if (res.code == 200) {
											uni.showToast({
												title: '已同意',
												duration: 2000
											});
											setTimeout(() => {
												that.$mRouter.back();
											}, 1000)
										}
										// this.$mHelper.toast('操作成功');
									})
									.finally(() => {
										that.loading = false;
									});
							}
						}
					});

				} else {
					//拒绝
					uni.showModal({
						title: '温馨提示',
						content: '是否确认拒绝该审批？',
						success: function(result) {
							if (result.confirm) {
								that.loading = true;
								refuse(params)
									.then((res) => {
										// this.$mHelper.toast('操作成功');
										if (res.code == 200) {
											uni.showToast({
												title: '已拒绝',
												duration: 2000
											});
											setTimeout(() => {
												that.$mRouter.back();
											}, 1000)
										}
									})
									.finally(() => {
										that.loading = false;
									});
							}
						}
					});

				}

			},
			// 撤回
			revokeItem() {
				var that = this
				const params = {
					...this.processInfo,
					currentUserInfo: uni.getStorageSync('user'),
					comments: this.sendDate.suggest,
				};
				uni.showModal({
					title: '温馨提示',
					content: '是否确认撤回该审批？',
					success: function(result) {
						if (result.confirm) {
							that.loading = true;
							revoke(params)
								.then((res) => {
									if (res.code == 200) {
										uni.showToast({
											title: '已撤回',
											duration: 2000
										});
										setTimeout(() => {
											that.$mRouter.back();
										}, 1000)
									}
								})
								.finally(() => {
									that.loading = false;
								});
						}
					}
				});


			}

		},

	};
</script>

<style lang="scss">
	.oa-notice-detail {
		.statusImg {
			position: absolute;
			right: 10px;
			top: 10px;
			width: 80px;
			/* height: 50px; */
			z-index: 9999;
		}

		.uni-timeline {
			padding: $spacing-lg;
			background-color: $color-white;
		}

		.feedback-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;
			background-color: $color-white;
		}

		.feedback-star-view.feedback-title {
			justify-content: flex-start;
			margin: 0;
		}

		.feedback-quick {
			position: relative;
			padding-right: 40upx;

			.iconfont {
				font-size: $font-sm;
			}
		}

		.feedback-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.feedback-textare {
			height: 1200upx;
			font-size: 34upx;
			line-height: 50upx;
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 30upx 0;
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 98;
			width: 100%;
			background-color: $color-white;
			color: $font-color-base;
			box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 15upx $spacing-base;

			.action-btn {
				font-size: $font-sm;
				margin: 0 0 0 15upx;
				padding: 0 $spacing-lg;
				text-align: center;
				height: 60upx;
				line-height: 60upx;
				// background-color: #F37B1D;
				color: #fff;
			}
		}

		.banner {
			overflow: hidden;
			position: relative;
			background-color: #ccc;

			.banner-img {
				height: 300upx;
				width: 100%;
			}

			.banner-title {
				max-height: 84upx;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 32upx;
				font-weight: 400;
				line-height: 42upx;
				color: white;
				z-index: 11;
				background-color: rgba(0, 0, 0, 0.25);
				padding: 4upx 20upx;
			}
		}

		.banner-title {
			padding: $spacing-lg $spacing-lg 0;
			font-size: $font-lg;
		}

		.article-meta {
			padding: 20upx 40upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			color: gray;

			.article-text {
				font-size: 26upx;
				line-height: 50upx;
				margin: 0 20upx;
			}

			.article-author,
			.article-time {
				font-size: 30upx;
			}
		}

		.article-content {
			padding: 0 30upx;
			overflow: hidden;
			font-size: 30upx;
			margin-bottom: 30upx;
		}

		.input-detail {
			margin-top: $spacing-base;
			font-size: $font-base;
			background: $color-white;
		}

		.input-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;
			background: $color-white;
		}

		.input-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;
		}

		.covers-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.covers-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.covers-uploader {
			padding: 22upx 20upx;
		}

		.text {
			color: #595959
		}
	}
</style>